<template>
  <div class="bottomtools" :class="type === 2 ? 'on' : ''">
    <a href="javascript:;" class="bottomtools_enter" @click="enterHandle">{{
      enterText
    }}</a>
    <a href="javascript:;" class="bottomtools_cancel" @click="cancelHandle">{{
      cancelText
    }}</a>
  </div>
</template>
<script>
export default {
  name: "BottomTools",
  props: {
    type: {
      type: Number,
      default() {
        return 1;
      },
    },
    cancelText: {
      type: String,
      default() {
        return this.$t("lang.取消");
      },
    },
    enterText: {
      type: String,
      default() {
        return this.$t("lang.保存");
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    cancelHandle() {
      this.$emit("cancelHandle");
    },
    enterHandle() {
      this.$emit("enterHandle");
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.bottomtools {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  &.on {
    display: block;
    position: relative;
    a {
      &.bottomtools_cancel {
        color: #666;
        width: 100%;
        margin: 0 auto;
      }
      &.bottomtools_enter {
        background-color: brown;
        border-radius: 5 / @base;
        color: #fff;
        width: 100%;
        margin: 0 auto;
      }
    }
  }
  a {
    padding: 10 / @base 0;
    display: block;
    &.bottomtools_cancel {
      color: #666;
      width: 35%;
    }
    &.bottomtools_enter {
      background-color: brown;
      color: #fff;
      width: 65%;
    }
  }
}
</style>
